<template>
	<view class="container">
		<swiper :indicator-dots="true" indicator-color="rgba(255,255,255,.3)" indicator-active-color="#ffffff" :autoplay="true" circular="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in listBanner" :key="index" @click="linkDetail(item)">
				<view class="swiper-item">
					<image class="banner"  :src="item.thumbUrl" mode="aspectFill"></image>
					<view class="bannerTitle">
						{{item.title}}
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="optionsBox">
			<view class="options" @click="link(1)">
				<image class="icon1" src="../../static/index/minzheng.png" mode=""></image>
				<view class="optionsTitle">民政人员</view>
			</view>
			<view class="options" @click="link(2)">
				<image class="icon2" src="../../static/index/kancha.png" mode=""></image>
				<view class="optionsTitle">勘察人员</view>
			</view>
			<view class="options">
				<!-- <image class="icon3" @click="link(3)" src="../../static/index/anfang.png" mode=""></image>
				<view class="optionsTitle">暗访人员</view> -->
			</view>
			<view class="options">
				<!-- <image class="icon4" @click="link(4)" src="../../static/index/jiuzhu.png" mode=""></image>
				<view class="optionsTitle">救助人员</view> -->
			</view>
		</view>
		<view class="line"></view>
		<view class="bottomOptionsBox">
			<view class="bottomOptions" v-for="(item,index) in list" :key="index" @click="linkDetail(item)">
				<view class="bottomOptionsLeft">
					<view class="bottomOptionsTitle">{{item.title}}</view>
					<view class="bottomOptionsLeftBottom">
						<view class="des">{{item.author?'来源：'+item.author:''}}</view>
						<view class="time">{{item.update_time}}</view>
					</view>
				</view>
				<image class="bottomOptionsRight" :src="item.thumbUrl" mode="aspectFill"></image>
			</view>
			<view class="" style="height: 40rpx;">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/collocation/pages?id=easycom',
				list:[],
				listBanner:[]
			}
		},
		onLoad() {
			this.getDetail()
		},
		methods: {
			linkDetail(item){
				uni.navigateTo({
					url: '/pages/index/article?url='+encodeURIComponent(item.url)
				});
			},
			async getDetail(){
				uni.showLoading({
					title:'请稍等...'
				})
				let res = await this.$get('/app/bus/wxIndex',
				{})
				console.log(res)
				if(res.code == 200){
					let list = []
					res.data.items.forEach(item=>{
						item.content.articles.forEach(itemIn=>{
							itemIn.update_time = item.updateTime.split('T')[0]
						})
						list.push(...item.content.articles)
					})
					this.list = list
					if(list.length>4){
						this.listBanner = list.slice(0,4)
					} else {
						this.listBanner = list
					}
				}
				uni.hideLoading()
			},
			link(type){
				// type:1.民政2.勘察3.暗访4.救助
				if(!uni.getStorageSync('user')){
					uni.redirectTo({
						url:'/pages/index/login'
					})
					return
				}
				if(type == 1&&uni.getStorageSync('user').roles[0].roleKey != 'mzy'){
					uni.showModal({
						content: '您不是民政人员',
						showCancel: false,
						confirmText: '确定'
					});
					return
				}
				if(type == 2&&uni.getStorageSync('user').roles[0].roleKey == 'mzy'){
					uni.showModal({
						content: '您不是勘察人员',
						showCancel: false,
						confirmText: '确定'
					});
					return
				}
				if(type == 3){
					uni.showModal({
						content: '您不是暗访人员',
						showCancel: false,
						confirmText: '确定'
					});
					return
				}
				if(type == 4){
					uni.showModal({
						content: '您不是救助人员',
						showCancel: false,
						confirmText: '确定'
					});
					return
				}
				if(uni.getStorageSync('user').roles[0].roleKey == 'mzy'){
					uni.navigateTo({
						url:'/pages/anfang/index'
					})
				} else {
					uni.navigateTo({
						url:'/pages/index/home'
					})
					// uni.navigateTo({
					// 	url:'/pages/anfang/index'
					// })
				}
				
			}
		}
	}
</script>

<style>
	page{
		background-color: #fafafa;
	}
	swiper{
		margin-top:40rpx;
	}
	swiper,swiper-item,.swiper-item{
		width:750rpx;
		height:300rpx;
	}
	.swiper-item{
		position: relative;
	}
	.banner{
		width:670rpx;
		height:300rpx;
		background-color: #fa5444;
		border-radius: 10rpx;
		margin: 0 auto;
	}
	.bannerTitle{
		line-height: 60rpx;
		width:670rpx;
		padding: 0 20rpx;
		background-color: rgba(0,0,0,.3);
		color: white;
		position: absolute;
		left: 40rpx;
		right: 40rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		bottom: 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.optionsBox{
		display: flex;
		margin-top: 30rpx;
	}
	.options{
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}
	.icon1{
		width: 93rpx;
		height: 77rpx;
	}
	.icon2{
		width: 115rpx;
		height: 79rpx;
	}
	.icon3{
		width: 101rpx;
		height: 70rpx;
		margin-bottom: 10rpx;
	}
	.icon4{
		width: 95rpx;
		height: 71rpx;
		margin-bottom: 10rpx;
	}
	.optionsTitle{
		text-align: center;
		margin-top: 10rpx;
	}
	.line{
		height: 20rpx;
		background-color: #efefef;
		margin-top:30rpx;
	}
	.bottomOptionsBox{
		padding: 0 30rpx;
		
		
	}
	.bottomOptions{
		padding-bottom:30rpx;
		padding-top:30rpx;
		display: flex;
		border-bottom:1rpx solid #ccc;
		justify-content: space-between;
	}
	.bottomOptionsLeft{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 430rpx;
	}
	.bottomOptionsLeftBottom{
		display: flex;
		justify-content: space-between;
	}
	.bottomOptionsRight{
		width: 210rpx;
		height:156rpx;
		background-color: #ccc;
		border-radius: 20rpx;
	}
	
	.bottomOptionsLeftBottom view{
		font-size: 26rpx;
		color: #ccc;
	}
</style>
